/*
 * @Author: wangjq4214
 * @Date: 2022-05-03 22:42:37
 * @LastEditTime: 2022-05-03 23:23:40
 * @LastEditors: wangjq4214
 */

import { Card, Spin } from '@arco-design/web-react';
import { loadingAtom, stepAtom } from './model';
import Form from './components/form';
import Success from './components/success';

const AddStorage = () => {
  const loading = useAtomValue(loadingAtom);
  const [step, setStep] = useAtom(stepAtom);

  useEffect(() => {
    setStep('back');
  }, [setStep]);

  return (
    <div>
      <Spin className="min-w-full" loading={loading}>
        <Card title={'创建存储集群'}>
          <div className="warp flex justify-center flex-col items-center py-64px bg-$color-bg-2">
            {step === 0 && <Form />}
            {step === 1 && <Success />}
          </div>
        </Card>
      </Spin>
    </div>
  );
};

export default AddStorage;
